<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="同学你好,同学你好导航,网址导航,自定义网址导航,定制网址导航,同学你好邀请码">
    <meta name="description" content="同学你好是一款高度可定制化的网址导航，可为每个用户提供个性化域名访问的导航页面。独一无二的定制化功能注定成为导航届的一批黑马，你的专属主页。">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="baidu_union_verify" content="6205508d44c10962cda3c47d998c7ef2">
    <link rel="icon" href="/favicon.ico">
    <title>同学你好</title>
    <#include "/common/public.html"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2984135_z36hd8z6s1.css">
    <link href="/css/collect.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/css/addcollect.css"/>
    <link rel="stylesheet" type="text/css" href="/css/nav.css"/>
</head>
<body class="white">
<#include "/common/header.html"/>
<div id="app">
    <div v-show="false" style="height: 100%;">
        <div class="bg">
            <div style="margin: 100px auto;"><span class="siteName">同学你好</span>
                <div style="margin: 10px auto;"></div>
                一切都是最好的开始
            </div>
            <div class="search">
                <div class="serach">
                    <div class="el-row is-justify-center el-row--flex">
                        <li class="li-tab"><i class="fa fa-cog fa-spin"></i> 留言板</li>
                        <li class="li-tab active"> 常用
                            <div class="trangle "></div>
                        </li>
                        <li class="li-tab"> 视频
                            <div class="trangle "></div>
                        </li>
                        <li class="li-tab"> 资源
                            <div class="trangle "></div>
                        </li>
                        <li class="li-tab"> 学术
                            <div class="trangle "></div>
                        </li>
                        <li class="li-tab"> 社交
                            <div class="trangle "></div>
                        </li>
                        <li class="li-tab"> 生活
                            <div class="trangle "></div>
                        </li>
                    </div>
                    <div class="el-row is-justify-center el-row--flex">
                        <li class="li-tab activeEngine"> 百度</li>
                        <li class="li-tab"> 谷歌</li>
                        <li class="li-tab"> 360</li>
                        <li class="li-tab"> Bing</li>
                        <li class="li-tab"> 多吉</li>
                        <li class="li-tab"> 搜狗</li>
                    </div>
                    <br>
                    <div class="el-row is-justify-center el-row--flex">
                        <div class="el-col el-col-24 el-col-xs-23 el-col-sm-18 el-col-md-10">
                            <div class="el-input el-input-group el-input-group--append el-input--suffix"
                                 style="position: relative;">
                                <form method="get" action="https://www.baidu.com/s" target="_blank">
                                    <input type="text" autocomplete="off" name="wd" autofocus="autofocus"
                                           placeholder="百度一下,你就知道" class="el-input__inner">
                                    <div style="position: absolute;top:6px;right:20px;">
                                        <button type="submit"
                                                style="width: 60px;height: 40px;border: 0;background:transparent;"><span
                                                type="text"><i class="fa fa-search"></i></span></button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="el-col el-col-24">
                <div class="totop">
                    <div style="height: 200px;"></div>
                    <div>
                        <div>
                            <div class="el-col el-col-24">
                                <div class="copyright">
                                    <a target="_blank" rel="nofollow"
                                       href="https://support.qq.com/products/106426">意见反馈</a>
                                    <a target="_blank" rel="nofollow"
                                       href="https://support.qq.com/products/106426/blog/11015">免责声明</a>
                                    <a target="_blank" rel="nofollow"
                                       href="https://support.qq.com/products/106426/blog/10953">请作者吃辣条</a>
                                    <div style="height: 10px;"></div>
                                    友情链接
                                    <a target="_blank" rel="follow" href="http://www.itbooking.net">同学你好</a>
                                    <a target="_blank" rel="follow" href="https://www.runningcheese.com/">奔跑中的奶酪</a>
                                    <a target="_blank" rel="follow" href="https://met.red/">遇见数据仓库</a>
                                    <a target="_blank" rel="follow" href="https://www.24kdh.cn/">24k导航</a>
                                    <a target="_blank" rel="follow" href="https://creatorsdaily.com/">创造者日报</a>
                                    <a target="_blank" rel="follow" href="http://zyplayer.fun/">ZY Player</a>
                                    <a target="_blank" rel="follow" href="http://www.qyun.vip/">Q云</a>
                                    <li>
                                        <a target="_blank" rel="nofollow" href="http://www.beian.miit.gov.cn/"
                                           style="color: grey;">京ICP备19043213号</a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0);" id="settingnav" style="color: grey;">设置导航</a>
                                    </li>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="contentx animate__animated animate__slideInDown">
        <div class="content-body">
            <div class="tool-card today">
                今天是：2021年11月18日 星期四 农历十月十四 ，2021年已经过去了87.95%，要加油哦！
            </div>
            <a href="javascript:void(0);" id="closenav" style="color: grey;">关闭</a>
            <div class="tool-content" v-for="(collect,index) in collectList" :key="collect.categoryId">
                <h3 class="tool-cate">{{collect.categoryTitle}}</h3>
                <ul class="tool-box">

                    <li v-for="(item,cindex) in collect.collectList" :key="item.id" class="ksd-item-box">
                        <a :href="item.hreflink" target="_blank" :title="item.title">
                            <dl class="tool-card">
                                <dt><img v-bind:src="item.iconlink" :alt="item.iconlink"> <strong>{{item.title}}</strong></dt>
                            </dl>
                        </a>
                        <a href="javascript:void(0);" @click="editItem(index,cindex)"  class="ksd-editbtn"><i class="iconfont icon-edit"></i></a>
                        <a href="javascript:void(0);" @click="delItem(index,cindex)"  class="ksd-closebtn"><i class="iconfont icon-cuowu"></i></a>
                    </li>

                    <li class="last-li">
                        <a href="javascript:void(0);" @click="expandAddBox(index)">
                            <div class="tool-card ksd-tool-card">
                                <span>+</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <transition
            name="custom-classes-transition"
            enter-active-class="animate__animated  animate__fadeInRight"
            leave-active-class="animate__animated  animate__fadeOutRight">
        <div class="ksd-addcollect-box" v-show="expandAddFlag">
            <div>
                <p>
					<input type="hidden" v-model="collect.categoryTitle">
                    <label class="tit">分类ID</label>
					<select id="categoryId" v-model="optionobj" @change="selectOption">
						<option value="">--请选择分类--</option>
						<option v-bind:value="option" v-for="(option,index) in optionarr">{{option.name}}</option>
					</select>
                </p>
                <p>
                    <label class="tit" for="title">标题</label>
                    <input type="hidden" v-model="collect.id">
                    <input type="text" autofocus v-model.trim="collect.title" id="title" placeholder="请输入标题" maxlength="100">
                </p>
                <p>
                    <label class="tit" for="iconlink">链接图标</label>
                    <input type="text" v-model.trim="collect.iconlink" id="iconlink"  placeholder="请输入链接图标" maxlength="400">
                </p>
                <p>
                    <label class="tit" for="hreflink">跳转地址</label>
                    <input type="text" v-model.trim="collect.hreflink" id="hreflink"  placeholder="请输入跳转地址" maxlength="400">
                </p>
                <p>
                    <label class="tit" for="sorted">排序</label>
                    <input type="text" v-model.number="collect.sorted" id="sorted"  placeholder="请输入排序" maxlength="8">
                </p>
                <p>
                    <label class="tit">发布状态</label>
					<label><input type="radio" v-model="collect.status" value="1"> 发布</label>
					<label><input type="radio" v-model="collect.status" value="0"> 未发布</label>
                </p>
                <p>
                    <button class="savebtn" @click="saveCollect">保存收藏</button>
                </p>
            </div>
        </div>
    </transition>
    <div class="overlay" @click="closeAddBox" v-show="expandAddFlag"></div>
</div>
<script src="/js/vue.global.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/collect/index.js"></script>
</body>
</html>